<template>
    <view class="service">
        <!-- <back></back> -->
        <view class="cate_img_url">
            <image class="cate_img_url-img" :src="cate_img_url" mode="scaleToFill" />
        </view>
        <!-- 分类 -->
        <view
            class="fill-base pl-md pr-md"
            style="overflow: hidden; position: relative"
            v-if="list.length > 0"
        >
            <column
                @change="goCate"
                :list="list"
                :indicatorActiveColor="primaryColor"
                :colNum="6"
                :rowNum="1"
            >
            </column>
            <view class="allbtn" @click="goServer()">
                <image
                    src="https://same.ascetic.top/img/qbfl.png"
                    mode=""
                    class="column-img"
                ></image>
                <view class="column-text">全部分类</view>
            </view>
        </view>
        <view class="top_fenlei">
            <view
                :class="second_id == item.id ? 'fenlei_active' : 'fenlei'"
                v-for="(item, index) in fenlei"
                :key="index"
                @click="choseSecond(item.id, index)"
            >
                {{ item.title }}
            </view>
        </view>
        <view class="con">
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="con_left" @scroll="scroll">
                <view
                    class="letf_title"
                    :class="item.id == third_id ? 'letf_title_active' : ''"
                    v-for="(item, index) in left_fenlei"
                    :key="index"
                    @click="choseThird(item.id)"
                >
                    {{ item.title }}
                </view>
            </scroll-view>
            <scroll-view
                :scroll-top="scrollTop1"
                scroll-y="true"
                class="con_right"
                @scroll="scroll1"
            >
                <view class="right_title" v-for="(item, index) in techlist" :key="index">
                    <technician-list-item
                        @comment="toShowPopup(index, 'message')"
                        @collect="toCollect(index)"
                        @order="toShowPopup(index, 'technician')"
                        :info="item"
                    >
                    </technician-list-item>
                </view>
                <technician-list-popup ref="technician_list_popup"></technician-list-popup>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
import technicianListItem from "./components/technician-list-item.vue";
import technicianListPopup from "./components/technician-list-popup.vue";
export default {
    components: {
        technicianListItem,
        technicianListPopup,
    },
    data() {
        return {
            cate_img_url: "",
            scrollTop: 0,
            scrollTop1: 0,
            fenlei: [],
            left_fenlei: [],
            list: [],
            first_id: "",
            first_index: "",
            type: "",
            second_id: "",
            second_index: "",
            third_id: "",
            third_index: "",
            techlist: [],
        };
    },
    computed: mapState({
        pageActive: (state) => state.service.pageActive,
        activeIndex: (state) => state.service.activeIndex,
        tabList: (state) => state.service.tabList,
        param: (state) => state.service.param,
        list: (state) => state.service.list,
        banner: (state) => state.service.banner,
        service_cate: (state) => state.service.service_cate,
        recommend_list: (state) => state.service.recommend_list,
        recommend_style: (state) => state.service.recommend_style,
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        autograph: (state) => state.user.autograph,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
        isGzhLogin: (state) => state.user.isGzhLogin,
        haveShieldOper: (state) => state.user.haveShieldOper,
        cityId: (state) => state.technician.cityId,
    }),
    onLoad(options) {
        this.cate_img_url = uni.getStorageSync("configInfo").cate_img_url;
        console.log(this.service_cate);
        this.first_id = options.id;
        this.type = options.type ? options.type : "";
    },
    onReady() {
        uni.request({
            url: "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=massage/app/Index/getCategory&urls=massage/app/Index/getCategory&cate_type=2",
            header: {
                autograph: uni.getStorageSync("autograph"),
            },
            success: (res) => {
                this.list = res.data.data;
                let index = res.data.data.findIndex((item) => item.id == this.first_id);
                let timeindex = index == -1 ? 0 : index;
                this.first_index = timeindex;
                this.fenlei = res.data.data[timeindex].children;
                this.second_id = res.data.data[timeindex].children[0].id
                    ? res.data.data[timeindex].children[0].id
                    : "";
                this.third_id = res.data.data[timeindex].children[0].children.data[0].id
                    ? res.data.data[timeindex].children[0].children.data[0].id
                    : "";
                this.left_fenlei = res.data.data[timeindex].children[0].children.data
                    ? res.data.data[timeindex].children[0].children.data
                    : "";
                this.getList();
            },
        });
    },
    methods: {
        getList() {
            console.log(uni.getStorageSync("location"));
            var location = uni.getStorageSync("location");
            uni.request({
                url:
                    "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=massage/app/Index/serviceCoachList&urls=massage/app/Index/serviceCoachList&page=1&ser_id=" +
                    this.third_id +
                    "&coach_name=& store_id=0&lng=" +
                    location.lng +
                    "&lat=" +
                    location.lat +
                    "&city_id=" +
                    this.cityId,
                header: {
                    autograph: uni.getStorageSync("autograph"),
                },
                success: (res) => {
                    this.techlist = res.data.data.data;
                    uni.stopPullDownRefresh();
                },
            });
        },
        goCate(e) {
            console.log(e);
            this.fenlei = e.children;
            this.first_id = e.id;
            this.second_id = e.children.length ? e.children[0].id : "";
            this.left_fenlei = e.children.length ? e.children[0].children.data : "";
            this.third_id = e.children[0].children.data.length
                ? e.children[0].children.data[0].id
                : "";
            if (this.third_id) {
                this.getList();
            } else {
                this.techlist = [];
            }

            // let {
            // 	id,
            // 	title
            // } = e
            // let url = link || `/user/pages/service/list?id=${id}&title=${title}`
            // this.$util.goUrl({
            // 	url
            // })
        },
        scroll: function (e) {
            console.log(e);
        },
        scroll1: function (e) {
            console.log(e);
        },
        async toShowPopup(index, key) {
            // console.log(this.$refs.technician_list_popup,index,key)
            // this.$refs.technician_list_popup()
            // this.$refs.technician_list_popup.toShowPopup(this.list.data[index], key)
            // this.$refs.technician_list_popup.toShowPopup(this.techlist.data[index], key)
            uni.navigateTo({
                url:
                    "/user/pages/order?id=" +
                    this.techlist[index].id +
                    "&service_id=" +
                    this.third_id,
            });
        },
        async toCollect(index) {
            let { id, is_collect, collect_num } = this.list.data[index];
            let methodModel = is_collect ? "delCollect" : "addCollect";
            await this.$api.mine[methodModel]({
                coach_id: id,
            });
            this.$util.showToast({
                title: is_collect ? "取消成功" : "收藏成功",
            });
            this.list.data[index].is_collect = is_collect == 1 ? 0 : 1;
            this.list.data[index].collect_num = is_collect == 1 ? collect_num - 1 : collect_num + 1;
        },
        choseThird(id) {
            this.third_id = id;
            this.getList();
        },
        goServer() {
            if (this.type) {
                uni.navigateBack({
                    delta: 1,
                });
            } else {
                uni.navigateTo({
                    url: "/yCreate/pages/allcate",
                });
            }
        },
        choseSecond(id, index) {
            this.second_id = id;
            this.left_fenlei = this.fenlei[index].children.length
                ? this.fenlei[index].children
                : "";
            this.third_id = this.fenlei[index].children.length
                ? this.fenlei[index].children.data[0].id
                : "";
            if (this.third_id) {
                this.getList();
            } else {
                this.techlist = [];
            }
        },
    },
    onPullDownRefresh() {
        this.getList();
    },
};
</script>

<style lang="less">
.service {
    height: 100vh;

    .cate_img_url {
        width: 100%;
        height: 10%;
        background-color: aqua;

        .cate_img_url-img {
            width: 100%;
            height: 100%;
        }
    }

    .top_fenlei {
        // height: 8%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 20rpx 20rpx 20rpx;
        background: #fff;

        .fenlei {
            background-color: #f5f5f5;
            min-width: 100rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            border-radius: 150rpx;
            margin: 0 20rpx 10rpx 0;
            padding: 0 30rpx;
            color: #888888;
        }

        .fenlei_active {
            background-color: #f5f5f5;
            min-width: 100rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            border-radius: 150rpx;
            margin: 0 20rpx 10rpx 0;
            padding: 0 30rpx;
            color: #606dce;
        }
    }

    .con {
        height: 68%;
        display: flex;
        flex-direction: row;

        .con_left {
            width: 20%;
            height: 100%;

            .letf_title {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                text-overflow: ellipsis;
                white-space: normal;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .letf_title_active {
                color: #606dce;
            }
        }

        .con_right {
            width: 80%;
            height: 100%;

            .right_title {
                width: 100%;
                height: 20%;
                background-color: #fff;
            }
        }
    }
}

.column-img {
    width: 94rpx;
    height: 94rpx;
    margin: 0 auto;
    border-radius: 50%;
}

.column-text {
    margin-top: 10rpx;
    text-align: center;
    color: #484848;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24rpx;
}

.allbtn {
    position: absolute;
    right: 0;
    z-index: 999;
    top: 0;
    padding-top: 30rpx;
    padding-right: 20rpx;
    padding-left: 20rpx;
    background: #fff;
}

.pd-lg {
    padding: 0 30rpx !important;
}
</style>
